<template>
    <div class="isShareImg" :style="{'opacity':opacity,'position':opacity==1?'fixed':'relative'}">
        <!-- 图片 -->
        <div class="shareImgContainer" ref="imageTofile" id="imageTofile" @touchmove.prevent
           >
            <img :src="nodataBg" alt="" class="shareImg">
            <img :src="yearDescImglocal" alt="" class="decTop">
            <a class="htmltoCanvas" href="" download="downImg"></a>
            <img class="htmltoCanvas" :src="isCanvasImg" v-if="isCanvas" download="downImg"
                :style="{'height':heightv+'px','width':widthv+'px'}">
            <div class="eyeshareCon shareCon">
                <p class="saveTxt">新的一年</p>
                <p class="saveTxt">愿所有的好运都猝不及防</p>
                <p class="saveTxt">愿所有的幸福都如期而至</p>
                <div class="billCardLinkCodeContent">
                    <div class="billCardLinkCode">
                        <img :src="QRcode" alt="">
                    </div>
                    <div class="billCardLinkCodeText">
                        <div class="billCardLinkCodeTitle">2021年度账单来啦</div>
                        <div class="billCardLinkCodeSubTitle">速去查看你这一年的收获</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="isVisibleShare" @touchmove.prevent v-show="isShareImg">
            <div class="shareContent">
                <div class="shareDetail">
                    <div class="shareItem">
                        <div class="itemCenter" @click="goShare('save')">
                           <!-- <div class="shareItemImg">
                                <img :src="save.imgSrc" alt="">
                                demo
                            </div> -->
                            <div class="shareItemText">长按上图保存</div>
                        </div>
                    </div>
                </div>
                <div class="shareCanel" @click="isShare">取消</div>
            </div>
        </div>

    </div>
</template>
<script>
    import {
        mapState
    } from "vuex";
    // import vueQr from 'vue-qr'
    import html2canvas from 'html2canvas'
    export default {
        name: "share-img",
        props: {
            isShareImg: {
                type: Boolean,
                default: false
            },


            hasMoney: {
                type: Boolean
            },

            yearDescSeq: {
                type: String
            },
            yearDescImglocal: {
                type: String
            },
            opacity: {
                type: Number
            },
        },
        components: {
            // vueQr
        },
        data() {
            return {
                save: {
                    // imgSrc: require('@/assets/img/financial/download.png'),
                    operateWord: '长按上图保存',
                    type: 'save',
                },
                isShareClick: false, // 分享按钮是否已被点击
                downloadData: {
                    icon: this.$urls.domain + "/assets/imgs/logo.png",
                },
                nodataBg: require("@/assets/imgs/yearbg.png"),
                QRcode: require("@/assets/imgs/QRcode.png"),
                canvasImageUrl: '',
                isCanvas: false,
                isCanvasImg: '',
                heightv: '',
                widthv: '',
            };
        },
        computed: {
            ...mapState(['isAndroid', 'isIOS'])
        },
        mounted() {
            let _this = this;
            var clearInt = setTimeout(function() {
                clearInterval(clearInt);
                _this.htmlToCanvas()
            }, 500)

        },
        created() {
            let _this = this;

        },
        methods: {
            //分享弹框显示或隐藏
            isShare() {
                this.$emit('shareDialog', this.isShareImg ? false : true)
                this.$emit('shareDialog1', this.opacity ? 0 : 1)
            },
            htmlToCanvas() {
                let _this = this;
                //创建一个新的canvas
                // _this.$commonJS.toastI('图片正在生成中，请稍后...');
                var canvas2 = document.createElement("canvas");
                let _canvas = document.querySelector('#imageTofile');
                var w = parseInt(window.getComputedStyle(_canvas).width);
                var h = parseInt(window.getComputedStyle(_canvas).height);

                // var w = parseInt(document.body.clientWidth);
                // var h = parseInt(document.body.clientHeight);
                _this.heightv = h;
                _this.widthv = w;
                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                canvas2.style.width = w + "px";
                canvas2.style.height = h + "px";
                //可以按照自己的需求，对context的参数修改,translate指的是偏移量
                var context = canvas2.getContext("2d");
                let dom = _this.$refs['imageTofile']
                //生成图片上方会有空白，解决办法：在生成图片之前 让滚动条高度为0就好

                window.pageYOffset = 0;
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;

                let imageTofile = document.getElementById('imageTofile')
                html2canvas(imageTofile, {
                    allowTaint: false, //允许污染
                    taintTest: true, //在渲染前测试图片(没整明白有啥用)
                    useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)

                    background: "#f00",
                    onrendered: function(canvas) {
                        callBack(); //回调
                    }
                }).then(function(canvas) {
                    //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                    document.querySelector(".htmltoCanvas").setAttribute('href', canvas.toDataURL());
                    _this.isCanvasImg = canvas.toDataURL();
                    _this.isCanvas = true;



                });
            },
        }
    };
</script>
<style lang="scss">
    .isShareImg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        min-width: 100%;
        background: rgba(0, 0, 0, 0.65);
        z-index: 9999;

        .shareImgContainer {
            width: 4.8rem;
            border-radius: .2rem;
            position: absolute;
            color: #006f98;
            z-index: 9;
            left: 50%;
            transform: translateX(-50%);
            bottom: 2.5rem;
            // box-shadow: 0px 0.02rem 0.20rem 0px rgba(0, 0, 0, 0.25);

            .shareImg {
                width: 100%;
                border-radius: 0.24rem;
            }

            .eyeshareCon {
                z-index: 999;
                position: absolute;
                width: 100%;
                bottom: 0.57rem;

                .yield {
                    font-size: 0.22rem;
                    color: #5d3322;
                    line-height: 0.32rem;
                    width: 2.82rem;
                    margin-left: 0.9rem;
                    text-align: center;

                    span {
                        font-size: 0.25rem;
                        color: #eb5313;
                    }
                }

                .billCardcon {
                    margin-top: 0.24rem;
                    font-size: 0.16rem;
                    color: #71422f;
                    text-align: center;
                }

                .billCardLinkCodeContent {
                    display: flex;
                    margin-top: 0.3rem;
                    margin-left: 0.57rem;

                    .billCardLinkCode {
                        width: .70rem;
                        height: .70rem;

                        img {
                            width: .70rem;
                            height: .70rem;
                        }
                    }

                    .billCardLinkCodeText {
                        margin-left: .49rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;

                        .billCardLinkCodeTitle {
                            font-size: .22rem;
                            font-family: SourceHanSansCN, SourceHanSansCN-Medium;
                            font-weight: 500;
                            color: #5d3322;
                            margin-top: 0.06rem;
                            line-height: 0.21rem;
                        }

                        .billCardLinkCodeSubTitle {
                            margin-top: .12rem;
                            font-size: .18rem;
                            font-family: SourceHanSansCN, SourceHanSansCN-Regular;
                            color: #5d3322;
                            line-height: 0.18rem;
                        }
                    }
                }
            }

            .shareCon {
                z-index: 999;
                position: absolute;
                width: 100%;
                bottom: 0.68rem !important;

                .billCardLinkCodeContent {
                    margin-top: 0.38rem !important;
                }
            }
        }

        .isVisibleShare {
            margin: 0 auto;
            z-index: 0;

            .shareContent {
                width: 100%;
                background: #ffffff;
                border-radius: .28rem .28rem 0 0;
                position: absolute;
                bottom: 0;
                left: 0;

                .shareDetail {
                    display: flex;
                    padding: 1rem 0 0.5rem 0;
                    width: 100%;
                    justify-content: space-evenly;

                    .shareItem {
                        // flex: 1;
                        display: flex;

                        .itemCenter {
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .shareItemImg {
                                width: 1rem;
                                height: 1rem;

                                img {
                                    width: 1rem;
                                    height: 1rem;
                                }
                            }

                            .shareItemText {
                                margin-top: .2rem;
                                font-size: 0.22rem;
                                font-family: PingFangSC, PingFangSC-Regular;
                                color: #999999;
                                line-height: .22rem;
                            }
                        }
                    }
                }
            }
        }
    }

    .shareCanel {
        width: 100%;
        background: #f5f7fc;
        text-align: center;
        font-size: 0.36rem;
        font-family: PingFangSC, PingFangSC-Regular;
        padding: .3rem 0;
        color: #333333;
    }

    .greenNum {
        color: #6dae43 !important;
    }

    .decTop {
        position: absolute;
        width: 95%;
        transform: translateX(-50%);
        left: 50%;
        top: 1.7rem;
    }

    .mint-toast.is-placemiddle {
        z-index: 999999999
    }

    .saveTxt {
        line-height: .57rem;
        font-size: .24rem;
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        color: #71422f;
        letter-spacing: .01rem;
        text-align: center;
        width: 100%;
    }

    .htmltoCanvas {
        position: absolute;width:100%;height:100%;
        top: 0;
        left: 0;
        background-size: 100%;
        z-index: 9999;
        border-radius: 0.5rem;
    }
</style>
